<template>
    <div class="address">
        <p><span>收货人</span> <input type="text" v-model="addperson" maxlength="30"></p>
        <p><span>联系电话</span> <input type="text" v-model="addtel" @keyup="keyup" maxlength="11"></p>
        <p><span>所在地区</span> <span class="q"  @click="address"><input type="text" readonly placeholder="请选择" value="" ref="address" v-model="addarea"><img src="../../assets/icon_click.png@2x.png" alt=""></span></p>
        <div class="more"><textarea  id="" placeholder="请填写详细地址，不少于5字" maxlength="100" v-model="adddetail"></textarea></div>
        <p class="checked"><span>设为默认</span><mt-switch v-model="qqq" @change="chekedchange"></mt-switch></p>
        <mt-popup  v-model="popupVisible" position="bottom" class="bottom" closeOnClickModa="false">
          <p><span @click="hidden">取消</span><span @click="show">确定</span></p>
           <mt-picker :slots="slots" @change="onValuesChange" class="qq" :visible-item-count="5"></mt-picker>
        </mt-popup>
        <div class="buttonbox" ref="buttonbox" @click="addresult">
            确定添加
        </div>
    </div>
</template>
<script>
import { MessageBox } from 'mint-ui';
import {getProvince,getCity,getArea,addAddress} from "src/methods/request.js";
export default {
   data() {
    return {
      addarea:"",
      addperson:"",
      addtel:"",
      adddetail:"",
      addcheced:"",
      qqq:false,
      slots: [
        {
            flex: 1,
            values: [],
            className: 'slot1',
            textAlign: 'center'
          }, {
            divider: true,
            content: '-',
            className: 'slot2'
          }, {
            flex: 1,
            values: [],
            className: 'slot3',
            textAlign: 'center'
          }, {
            divider: true,
            content: '-',
            className: 'slot4'
          }, {
            flex: 1,
            values: [],
            className: 'slot5',
            textAlign: 'center'
          }
      ],
      popupVisible:false,
      provinceList:[],
      provinceName:[],
      provinceCode:[],
      CityList:[],
      cityName:[],
      cityCode:[],
      AreaList:[],
      areaName:[],
      areaCode:[],
      provinceScroll:"",
      cityScroll:"",
      areaScroll:"",
      reults:""
    }
  },
  created() {
  },
   mounted(){

    },
  methods:{
    inpfocus(){
      console.log("shi")
    },
    inpblur(){
      console.log("获取")
    },
    //checked 点击
    chekedchange(){
      console.log(this.qqq)
    },
    //所在地区点击
    address(){
      this.popupVisible= true;
      // console.log(this.slots[0].values)
      var self = this;
      //获取默认省市区
       getProvince({}).then(
            response => {
              this.provinceList  = Object.assign([], response.data.provinceList)
              // console.log(this.provinceList)
              // 图片加域名
                for( var item of this.provinceList ){
                     this.provinceName.push(item.provinceName)
                     this.provinceCode.push(item.provinceCode)
                    //  console.log(this.provinceName)
                }
                  // console.log(this.provinceName)
                this.slots[0].values = this.provinceName;

                // console.log(this.provinceCode,"11212")
                 getCity({provinceCode:this.provinceCode[0]}).then(
                    response => {
                      this.CityList  = Object.assign([], response.data.cityList)
                      // console.log(this.CityList)

                        for( var item of this.CityList ){
                             this.cityName.push(item.cityName)
                             this.cityCode.push(item.cityCode)
                        }
                        this.slots[2].values = this.cityName;

                        //区
                              getArea({cityCode:this.cityCode[0]}).then(
                                  response => {
                                    this.AreaList  = Object.assign([], response.data.areaList)
                                    // console.log(this.AreaList)

                                      for( var item of this.AreaList ){
                                          this.areaName.push(item.areaName)
                                          this.areaCode.push(item.areaCode)
                                      }
                                      this.slots[4].values = this.areaName;

                                  }
                                  ).catch(
                                    error => console.log(error)
                              );
                        //区
                       this.provinceName= [];
                       this.provinceCode = [];
                       this.cityName = [];
                       this.cityCode = [];
                       this.areaName = [];
                       this.areaCode = [];
                     }
                    ).catch(
                      error => console.log(error)
                );
             }
            ).catch(
              error => console.log(error)
           )
    },
    //省份变化
    provinceChange(){
      // console.log(this.provinceList[this.provinceScroll].provinceCode)
        getCity({provinceCode:this.provinceList[this.provinceScroll].provinceCode}).then(
                    response => {
                      this.CityList  = Object.assign([], response.data.cityList)
                      // console.log(this.CityList)

                        for( var item of this.CityList ){
                             this.cityName.push(item.cityName)
                             this.cityCode.push(item.cityCode)
                        }
                        this.slots[2].values = this.cityName;
                         this.cityName = [];
                        this.cityCode = [];
                    }

             ).catch(
              error => console.log(error)
           )
    },
    //市区变化
     cityChange(){
      // console.log(this.CityList[this.cityScroll].cityCode)
        getArea({cityCode:this.CityList[this.cityScroll].cityCode}).then(
                    response => {
                      this.AreaList  = Object.assign([], response.data.areaList)

                        for( var item of this.AreaList ){
                             this.areaName.push(item.areaName)
                             this.areaCode.push(item.areaCode)
                        }
                         this.slots[4].values = this.areaName;
                         this.areaName = [];
                         this.areaCode = [];
                    }

             ).catch(
              error => console.log(error)
           )
    },
    onValuesChange(picker, values) {
      var self = this;
      //省
      for(var i =0;i<this.slots[0].values.length;i++){
          if(this.slots[0].values[i] == picker.getSlotValue(0)){
              self.provinceScroll = i
              self.provinceChange();
              // return;
         }
      }
      //市
      for(var i =0;i<this.slots[2].values.length;i++){
        if(this.slots[2].values[i] == picker.getSlotValue(1)){
            self.cityScroll = i
            self.cityChange();
            // return;
       }
      }
      //县
      for(var i =0;i<this.slots[4].values.length;i++){
        if(this.slots[4].values[i] == picker.getSlotValue(2)){
            self.areaScroll = i
            // return;
       }
      }

      this.reults = picker.getSlotValue(0)+picker.getSlotValue(1)+picker.getSlotValue(2);
    },
    //取消
    hidden(){
      this.popupVisible= false;
    },
    // 确定
    show(){
      this.popupVisible= false;
      this.addarea = this.reults;

    },
    keyup(){
      		this.addtel=this.addtel.replace(/[^0-9]/g,'')
      },
    addresult(){
       if(this.adddetail.length<5){
          MessageBox('', '详细地址不少于5字');
          return;
       }
         if(this.addarea==""){
          MessageBox('', '请选择所在地区');
          return;
       }
       if(this.addtel==""){
         MessageBox('', '请填写正确手机号码');
         return;
        }
       if(this.addperson==""){
         MessageBox('', '请填写收货人');
         return;
       }

      let myprovinceCode = this.provinceList[this.provinceScroll].provinceCode
      let mycityCode = this.CityList[this.cityScroll].cityCode
      let myareaCode = this.AreaList[this.areaScroll].areaCode

      // 0是 1fasle
      let isdefault;
      if(this.qqq){
        isdefault =0
      }else{
         isdefault =1
      }
       addAddress({
        contact:this.addperson,
        address:this.adddetail,
        phone:this.addtel,
        isDefault:isdefault,
        provinceCode:myprovinceCode,
        cityCode:mycityCode,
        areaCode:myareaCode
         }).then(
            response => {
                console.log(response.rspCode)
                if(response.rspCode=="0000"){
                     this.$router.push({
                          path:"/shopAddressManage",
                          query:{

                          }
                      })
                }else{
                   MessageBox('', '提交失败');
                }
             }
             ).catch(
              error => console.log(error)
           )
      }
  },
  watch:{
    // provinceScroll(){
    // // console.log("1111")
    // }
  }
}
</script>


<style lang="less" scoped>
.address{
    padding-top: 6px;
    box-sizing: border-box;
    font-size: 16px;
    .checked{
       height: 4rem;
    }
    .more{
      padding: 0px 10px 0px 10px;
      box-sizing: border-box;
      height: 6rem;
      text-align: left;
      border-bottom: 1px solid #f1f0f0;
      textarea{
        font-size: 16px;
        width: 100%;
        height: 100%;
        resize:none;
        border:0;
        outline:none;
        word-break: break-all;
        border-bottom: 1px solid #f1f0f0;
      }
    }
    p{
      padding: 0px 10px 0px 10px;
      box-sizing: border-box;
      height: 3rem;
      width: 100%;
      // background-color: red;
      border-bottom: 1px solid #f1f0f0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      input{
        width: 75%;
        height: 2rem;
        text-align: right;
      }
      .q{
        width: 75%;
        text-align: right;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        input{
          width: 96%;
          overflow: hidden;
          text-overflow :ellipsis;
          white-space: nowrap;
        }
        img{
        margin-top: 1px;
         width: 6px;
         height: 13x;
      }
      }
    }

     .buttonbox {
        margin-top: 20px;
        margin-left: 4.5%;
        width: 91%;
        color: #fff;
        height: 40px;
        background-color: #ED6E36;
        line-height: 40px;
        border-radius: 5px;
        position: fiexd;
        bottom: 20px;
    }
    .fixed {
        position: absolute;
        bottom: 20px;
    }
    .qq{
      width: 100%;
    }
     .bottom{
      width: 100%;
       .qq{
           width: 100%;
           background-color: #f1f0f0;
          }
       p{
        border-top: 1px solid #f1f0f0;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
        color: rgb(60, 60, 175);
      }
    }
}


</style>

